import React, { useEffect, useState } from 'react';
import { Form, Row, Col, Input, Button, DatePicker, Select, Spin } from 'antd';
import request from '@/utils/request';

const { RangePicker } = DatePicker;

function QueryCondition({ form, query }) {
  const { getFieldDecorator } = form;
  const [loading, setLoading] = useState(false);
  const [flowDefTypeMap, setFlowDefType] = useState([]);
  const [statusCdMap, setStatusCd] = useState([]);
  useEffect(() => {
    request('pmc/pms/StaticDataController/getStaticAttr.do', {
      data: {
        busiObjNbr: 'PmOrderFlowDef',
        attrNbr: 'processType',
      },
    })
      .then(res => {
        setFlowDefType(res);
      })
      .always(() => setLoading(false));
    request('pmc/pms/StaticDataController/getStaticAttr.do', {
      data: {
        busiObjNbr: 'PmOrderWork',
        attrNbr: 'statusCd',
      },
    })
      .then(res => {
        setStatusCd(res);
      })
      .always(() => setLoading(false));
  }, []);

  const submit = () => {
    form.validateFields((err, fieldsValue) => {
      if (err) return;
      if (fieldsValue.schCreateDate !== undefined && fieldsValue.schCreateDate !== null) {
        fieldsValue.startDate = fieldsValue.schCreateDate[0].format('YYYY-MM-DD');
        fieldsValue.endDate = fieldsValue.schCreateDate[1].format('YYYY-MM-DD');
      }
      query(fieldsValue);
    });
  };

  const handleReset = () => {
    form.resetFields();
  };

  return (
    <Spin spinning={loading}>
      <Form className="flow fix-label padding-bottom">
        <Row gutter={16}>
          <Col span={6}>
            <Form.Item label="流程实例标识">
              {getFieldDecorator('flowInstId', {
                // initialValue: '11',
              })(<Input allowClear placeholder="请输入" />)}
            </Form.Item>
          </Col>
          <Col span={6}>
            <Form.Item label="流程名称">
              {getFieldDecorator('orderName', {
                // initialValue: '11',
              })(<Input allowClear placeholder="请输入" />)}
            </Form.Item>
          </Col>
          <Col span={6}>
            <Form.Item label="流程类型">
              {getFieldDecorator('flowDefType')(
                <Select allowClear placeholder="请选择">
                  {flowDefTypeMap.map(item => {
                    return (
                      <Select.Option value={item.attrValue}>{item.attrValueName}</Select.Option>
                    );
                  })}
                </Select>
              )}
            </Form.Item>
          </Col>
        </Row>
        <Row gutter={16}>
          <Col span={6}>
            <Form.Item label="流程状态">
              {getFieldDecorator('statusCd')(
                <Select allowClear placeholder="请选择">
                  {statusCdMap.map(item => {
                    return (
                      <Select.Option value={item.attrValue}>{item.attrValueName}</Select.Option>
                    );
                  })}
                </Select>
              )}
            </Form.Item>
          </Col>
          <Col span={6}>
            <Form.Item label="开始时间">
              {getFieldDecorator('schCreateDate')(<RangePicker />)}
            </Form.Item>
          </Col>
          <Col span={12} className="text-right">
            <Button type="primary" onClick={submit}>
              查询
            </Button>
            <Button className="margin-left" onClick={handleReset}>
              重置
            </Button>
          </Col>
        </Row>
      </Form>
    </Spin>
  );
}

export default Form.create()(QueryCondition);
